<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    防抖
    函数防抖是指在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时.这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求

    function debounce(fn, wait){
        let timer = null;
        return function(){
            let context = this;
            let args = arguments;
            //如果此时定时器已经存在了，则取消之前的定时器重新计时
            if(!timer){
                clearTimeout(timer);
                timer = null;
            }
            //设置定时器，使事件间隔指定事件后触发
            timer = setTimeout(() => {
                fn.apply(context,args);
                
            }, wait);
        }
    }

    节流
    函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效.节流可以使用在scroll函数的事件监听上,通过事件节流来降低事件调用的频率
    function throttle(fn,delay){
        let timer = null;
        return function(){
            let context = this;
            let args = arguments;
            if(!timer){
                timer = setTimeout(() => {
                    fn.apply(context,args)
                    timer = null;
                }, delay);
            }
        }
    }


    // 时间戳写法
    function throttle(fn,delay){
        let oldTime = Date.now();
        return function(){
            let context = this;
            let args = arguments;
            let newTime = Date.now();
            if(newTime-oldTime>=delay){
                fn.apply(context.args);
                oldTime = Date.now();
            }
        } 
    }

</script>
</html>